<template>
    <div v-if="visible" :class="messageClassName" :style="[messageStyle]">
        <div :class="typeIconClassName" v-show="showIcon">
            <Icon :src="IconSrcMap[messageType]"></Icon>
        </div>
        <span>{{ messageContent }}</span>
        <div v-show="isShowCloseIcon" :class="closeIconClassName" @click="close">
            <Icon :src="CloseSrc"></Icon>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    options: {
        virtualHost: true
    }
}
</script>
<script setup lang="ts">
import { computed } from '../../../../adapter-vue'
import Icon from '../Icon/Icon.vue'
import { classNames } from '../util'
import { PREFIX } from '../constants/index'
import { MessageProps, MessageEmits, useMessage } from './Message'
const ErrorSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/message/error.svg'
const SuccessSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/message/success.svg'
const WaringSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/message/warning.svg'
const InfoSrc = 'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/message/info.svg'
const CloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/message/close.svg'

const props = defineProps(MessageProps)
const emits = defineEmits(MessageEmits)
const { messageContent, messageType, messageOffset, isShowCloseIcon, visible, show, close } =
    useMessage(props, emits)
const messageClassName = computed(() =>
    classNames([`${PREFIX}-message`, `${PREFIX}-message--${messageType.value}`, props.customClass])
)
const typeIconClassName = computed(() => classNames([`${PREFIX}-message_icon`]))
const closeIconClassName = computed(() => classNames([`${PREFIX}-message_close`]))
const top = computed(() => `${messageOffset.value}px`)
const messageStyle = computed(() => ({ top: top.value, ...props.customStyle }))

const IconSrcMap = {
    info: InfoSrc,
    waring: WaringSrc,
    success: SuccessSrc,
    error: ErrorSrc
}

defineExpose({
    show,
    close
})
</script>

<style lang="scss">
@import './style/Message.scss';
</style>
